<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wjn
 * @LastEditTime: 2022-01-07 13:37:56
-->
<template>
  <div ref="right1_container" style="height:95%"></div>
</template>

<script>
import { DualAxes } from '@antv/g2plot'

export default {
    data() {
      return {
        dataArr:[
          { year: '1991', value: 3, count: 10 },
          { year: '1992', value: 4, count: 4 },
          { year: '1993', value: 3.5, count: 5 },
          { year: '1994', value: 5, count: 5 },
          { year: '1995', value: 4.9, count: 4.9 },
          { year: '1996', value: 6, count: 35 },
          { year: '1997', value: 7, count: 7 },
          { year: '1998', value: 9, count: 1 },
          { year: '1999', value: 13, count: 20 },
        ]
      }
    },
    created() { //钩子函数

    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        const dualAxes = new DualAxes(this.$refs.right1_container, {
          data:[this.dataArr,this.dataArr],
          xField: 'year',
          yField: ['value','count'],
          geometryOptions: [{
            geometry:'line',
            color:'#5B8FF9'
          },
          {
            geometry:'line',
            color:'#5AD8A6'
          },
          ]
        })
        dualAxes.render();
      }
    }
}
</script>

<style scoped>

</style>